<template>

  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-card class=" user_card  ">
          <div slot="header">礼物统计</div>
          <div id="pie_id" class="bar-ecaher" />
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">

        <el-card class=" user_card  ">
          <div slot="header">礼物榜</div>
          <div id="bar1_id" class="echars_user" />
        </el-card>

      </el-col>
    </el-row>
  </div>

</template>

<script>
import echarts from 'echarts'
import {
  getDatas
} from '@/api/stat'
export default {
  name: 'Page',
  data() {
    return {
      datainfo: []
    }
  },
  mounted() {
    // 在通过mounted调用即可
    this.echartsInit()
  },
  async created() {
    // this.getData()
    // setInterval(() => {
    this.echartsInit()
    // }, 10000)
  },
  methods: {
    // async getData() {
    //   let res = await getDatas(12)
    //   this.datainfo=res
    // },
    // 初始化echarts
    // getDatas(11).then(rest=>{
    //   console.log(rest)
    // })
    echartsInit() {
      getDatas(7).then(info => {
        // 柱形图
        // 因为初始化echarts 的时候，需要指定的容器 id='main'
        // this.$api.stat.info().then(res => {
        echarts.init(document.getElementById('bar1_id')).setOption({
          title: {
            text: '点赞TOP5'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: '点赞人数',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: info.data.video.videomenu
          },
          series: [
            {
              type: 'bar',
              data: info.data.video.videodata
            }

          ]
        })

        echarts.init(document.getElementById('pie_id')).setOption({
          title: {
            text: '礼物总计' + (info.data.count) + '件',
            left: 'center'
          },
          backgroundColor: '#fffae8',
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right'
          },
          series: [{
            name: '礼物统计',
            type: 'pie',
            radius: '80%',
            data: [{
              value: info.data.count,
              name: '总计'
            }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        })
      })
    }
  }
}
</script>
<style scoped>
  .app-container {
    .permission-tree {
      margin-bottom: 30px;
      color: #fffae8;
    }

  }

  .user_card {
    background: #fffae8;
    width: auto;
    /* height: 30%; */
  }

  .echars_user {
    width: 100%;
    height: 200px;
  }

  .bar-ecaher {
    width: auto;
    height: 500px;
  }
</style>
